<template>
    <img src="../../components/1.png" alt="" srcset="" style="width: 100%;">
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="username" name="username" label="手机号" placeholder="手机号"
                :rules="[{ pattern: pattern, required: true, message: '请填写手机号' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ pattern1: pattern1, required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                登录
            </van-button>
            <router-link to="/leg">
                <span>立即注册</span>
            </router-link>
        </div>
    </van-form>
    <img src="../../components/2.png" alt="" style="width: 100%;">

</template>

<script setup>
import { ref } from 'vue'
import { loginApi } from '@/api/api';

import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant';

const router = useRouter()
const route = useRoute()
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
const username = ref('');
const password = ref('');
const onSubmit = (values) => {
    console.log('submit', values);
    loginApi(username.value, password.value).then((res) => {
        if (res.data.code == 0) {
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('username',res.data.data.username)
            store.loginCar(username.value)
            router.push('/home/index')
        }else{
            showToast('登陆成功')
        }
    })
};


const pattern = /^1{1,9}\d{10}/;
const pattern1 = /^\w{8}/;
</script>

<style lang="scss" scoped></style>